import React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AMapDemo from './AMapDemo';
import AMapDemo2 from './AMapDemoType2';
import AMapDemo3 from './AMapDemoType3';
import AMapDemo4 from './AMapDemoType4';
import AMapDemo5 from './AMapDemoType5';
import AMapDemo6 from './AMapDemoType6';
import AMapDemo7 from './AMapDemoType7';
import AMapDemo8 from './AMapDemoType8';
import {
  SafeAreaProvider,
  SafeAreaView,
  initialWindowMetrics,
} from 'react-native-safe-area-context';

const Stack = createStackNavigator();

class Entrance extends React.Component {
    onPress1 = () => {
        this.props.navigation.navigate('AMapDemo');
    }
    onPress2 = () => {
        this.props.navigation.navigate('AMapDemo2');
    }
    onPress3 = () => {
        this.props.navigation.navigate('AMapDemo3');
    }
    onPress4 = () => {
        this.props.navigation.navigate('AMapDemo4');
    }
    onPress5 = () => {
        this.props.navigation.navigate('AMapDemo5');
    }
    onPress6 = () => {
        this.props.navigation.navigate('AMapDemo6');
    }
    onPress7 = () => {
        this.props.navigation.navigate('AMapDemo7');
    }
    onPress8 = () => {
        this.props.navigation.navigate('AMapDemo8');
    }

    render() {
        return (
            <View style={{padding:14}}>
                <View style={{height:50}}>
                    <Button title="Amap3dDemo"  onPress={this.onPress1}></Button>
                </View>
                <View style={{height:50,marginTop:12}}>
                    <Button title="Amap3dDemo2"  onPress={this.onPress2}></Button>
                </View>
                <View style={{height:50,marginTop:12}}>
                    <Button title="Amap3dDemo3"  onPress={this.onPress3}></Button>
                </View>
                <View style={{height:50,marginTop:12}}>
                    <Button title="Amap3dDemo4"  onPress={this.onPress4}></Button>
                </View>
                <View style={{height:50,marginTop:12}}>
                    <Button title="Amap3dDemo5"  onPress={this.onPress5}></Button>
                </View>
                <View style={{height:50,marginTop:12}}>
                    <Button title="Amap3dDemo6"  onPress={this.onPress6}></Button>
                </View>
                <View style={{height:50,marginTop:12}}>
                    <Button title="Amap3dDemo7"  onPress={this.onPress7}></Button>
                </View>
                <View style={{height:50,marginTop:12}}>
                    <Button title="Amap3dDemo8"  onPress={this.onPress8}></Button>
                </View>
            </View>
        );
    }
};

class AMapApp extends React.Component {
    render() {
        return (
            <SafeAreaProvider initialMetrics={initialWindowMetrics}>
                <SafeAreaView style={{ flex: 1 }}>
                    <NavigationContainer>
                        <Stack.Navigator initialRouteName="amap3d组件测试">
                          <Stack.Screen name="amap3d组件测试" component={Entrance} />
                          <Stack.Screen name="AMapDemo" component={AMapDemo} />
                          <Stack.Screen name="AMapDemo2" component={AMapDemo2} />
                          <Stack.Screen name="AMapDemo3" component={AMapDemo3} />
                          <Stack.Screen name="AMapDemo4" component={AMapDemo4} />
                          <Stack.Screen name="AMapDemo5" component={AMapDemo5} />
                          <Stack.Screen name="AMapDemo6" component={AMapDemo6} />
                          <Stack.Screen name="AMapDemo7" component={AMapDemo7} />
                          <Stack.Screen name="AMapDemo8" component={AMapDemo8} />
                        </Stack.Navigator>
                    </NavigationContainer>
                </SafeAreaView>
            </SafeAreaProvider>
        );
    }
}

// export default AMapApp;

export default {
    displayName: 'react-native-amap3d',
    framework: 'React',
    category: 'UI',
    title: 'react-native-amap3d',
    documentationURL: 'react-native-amap3d',
    description: 'React Native Element Dropdown',
    examples: [
      {
        title: 'react-native-picker-select',
        render: function (): any {
          return <AMapApp />;
        },
      },
    ],
  };


